<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/userStore'
import { House, Location, Service, Setting, DataLine, TurnOff, Tools, Search, Plus } from '@element-plus/icons-vue'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 使用计算属性从Pinia获取用户角色
const userRole = computed(() => userStore.role)

// 退出登录
const handleLogout = () => {
  // 清除用户信息
  userStore.logout()
  router.push('/login')
}
</script>

<template>
  <div class="dashboard-layout">
    <!-- 侧边栏 -->
    <el-aside width="200px" class="sidebar">
      <div class="logo">
        <h2>高速公路管理系统</h2>
      </div>
      <el-menu
        :default-active="route.path"
        router
        background-color="transparent"
        text-color="#ffffff"
        active-text-color="#67C23A"
        :unique-opened="true"
      >
        <!-- 首页概览菜单项 -->
        <el-menu-item index="/dashboard/home">
          <el-icon><House /></el-icon>
          <span>首页概览</span>
        </el-menu-item>

        <!-- 路况管理菜单项 - 仅管理员可见 -->
        <el-menu-item v-if="userRole === 'admin'" index="/dashboard/road-management">
          <el-icon><Location /></el-icon>
          <span>道路管理</span>
        </el-menu-item>
        <el-sub-menu v-if="userRole === 'admin'" index="facility-management">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>设施管理</span>
          </template>
          <el-menu-item v-if="userRole === 'admin'" index="/dashboard/ServiceAreaManagement">
            <el-icon><Service /></el-icon>
            <span>服务区管理</span>
          </el-menu-item>
          <el-menu-item v-if="userRole === 'admin'" index="/dashboard/EntranceManagement">
            <el-icon><TurnOff /></el-icon>
            <span>进出口管理</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-if="userRole === 'visitor'" index="/dashboard/UserAddAccident">
          <template #title>上报事故点</template>
          <el-icon><Setting /></el-icon>
          <span></span>
        </el-menu-item>
        <el-menu-item v-if="userRole === 'visitor'" index="/dashboard/GoToServiceAndEntrance">
          <template #title>服务区和出入口导航</template>
          <el-icon><Location /></el-icon>
          <span></span>
        </el-menu-item>
        <el-sub-menu v-if="userRole === 'admin'" index="accident-management">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>事故点管理</span>
          </template>
          <el-menu-item index="/dashboard/AddAccidentPoint">
            <el-icon><Plus /></el-icon>
            <span>新增事故点</span>
            <span class="menu-note">(双击后查询和修改)</span>
          </el-menu-item>
          <el-menu-item index="/dashboard/HandleAccident">
            <el-icon><Setting /></el-icon>
            <span>用户上报事故点处理</span>
          </el-menu-item>
        </el-sub-menu>
        <!-- 高速公路查询菜单项 -->
        <el-menu-item index="/dashboard/highway-query">
          <el-icon><Search /></el-icon>
          <span>高速公路查询</span>
        </el-menu-item>
        <!-- 数据统计菜单项 -->
        <el-menu-item index="/dashboard/statistics">
          <el-icon><DataLine /></el-icon>
          <span>数据统计</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 顶部栏 -->
      <el-header class="header">
        <div class="welcome-text">
          <span v-if="userRole === 'admin'">欢迎回来，尊敬的管理员</span>
          <span v-else-if="userRole === 'visitor'">欢迎访问，尊敬的游客</span>
        </div>
        <div class="user-info">
          <el-tag v-if="userRole === 'admin'" type="success" effect="dark">管理员</el-tag>
          <el-tag v-else-if="userRole === 'visitor'" type="info" effect="dark">游客</el-tag>
        </div>
        <el-button type="danger" @click="handleLogout">退出登录</el-button>
      </el-header>

      <!-- 主要内容区域 -->
      <el-main class="main-content">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
/* 高速公路风格的动画效果 */
@keyframes highway-line {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 0;
  }
}

.menu-note {
  font-size: 12px;
  color: #e6a23c;
  margin-left: 5px;
}
.dashboard-layout {
  height: 100vh;
  display: flex;
}

.sidebar {
  background: linear-gradient(to bottom, #1e3c72, #2a5298);
  color: white;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #67c23a, #409eff);
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  position: relative;
}

.logo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.logo h2 {
  color: white;
  font-size: 16px;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
}

.header {
  background-color: white;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.welcome-text {
  font-size: 16px;
  color: #606266;
}

.user-info {
  margin: 0 20px;
}

.main-content {
  background-color: #f5f7fa;
  padding: 20px;
}
</style>



